<template>
  <div id="serviceItem">
    <el-container>
      <el-aside width="200px">
        <div class="title">
          <h2>{{titleText}}</h2>
        </div>
        <div class="navButton">
          <el-menu
                  :default-active='$route.path'
                  class="el-menu-vertical-demo"
                  background-color="#2368ba"
                  text-color="#e7d9d9"
                  active-text-color="#ffd04b">
            <el-menu-item v-for="(item,index) in tab"
                          :v-key="index"
                          :index="item.path"
                          @click="changeRouter(index)">
              <i class="el-icon-menu"></i>
              <span slot="title" style="font-size: 16px">{{item.name}}</span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-aside>
      <el-main>
        <slot name="main"></slot>
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  export default {
    name: "ServiceItem",
    props:{
      titleText:String,
      tab:Array
    },
    methods:{
      changeRouter(index){
        this.$router.push(this.tab[index].path)
      }
    }
  }
</script>

<style scoped>
  #serviceItem{
    /*height: 800px;*/
  }
  /deep/.el-aside {
    background-color: #2368ba;
    color: #333;
    text-align: center;
    height: calc(100vh - 84px);
    /*line-height: 82px;*/
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    height: calc(100vh - 84px);
  }

  .title{
    width: 100%;
    height: 100px;
    line-height: 100px;
    border-bottom: 2px solid #0f4984;
    background-color: #225793;
    color: #e8e5e5;
  }
  .el-button{
    width: 150px;
    margin: 15px auto;
    font-size: 18px;
  }
  h2{
    margin: 0;
  }
</style>